/*
 * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
 * Licensed under the 【火山方舟】原型应用软件自用许可协议
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at 
 *     https://www.volcengine.com/docs/82379/1433703
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React, { HTMLAttributes, type MouseEvent } from 'react';
import cx from 'classnames';

export interface IVsPageProps extends HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
  pageNum: number;
  isRight: boolean;
  isFlipped: boolean;
  onFlip?: (e: MouseEvent, pageNum: number) => void;
  showHoverBar?: boolean;
  className?: string;
  style?: React.CSSProperties;
}

export const VsPage: React.FC<IVsPageProps> = ({
  children,
  pageNum,
  isRight,
  isFlipped,
  onFlip,
  showHoverBar,
  className,
  style,
}) => {
  const pageClasses = [
    'vs-storybook__page',
    isRight ? 'vs-storybook__page--right' : 'vs-storybook__page--left',
    isFlipped ? 'vs-storybook__page--flipped' : '',
    'overflow-hidden',
  ]
    .filter(Boolean)
    .join(' ');

  const handleClick = (e: MouseEvent) => {
    onFlip?.(e, pageNum);
  };

  return (
    <div onClick={handleClick} style={style} className={cx(pageClasses, className)}>
      {showHoverBar && <div className="vs-storybook__page-hover-bar"></div>}
      <div className="vs-storybook__page-content">{children}</div>
    </div>
  );
};
